<template>
    <div class="breadcrumb">
        <router-link class="shouye" to="/home">首页 / </router-link>
        <router-link class="weigui" to="/wg">违规投诉</router-link>
        <button class="go-to-complain" @click="showComplainDialog = true">去投诉</button>
    </div>
    <div id="app">
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th class="left-align">动态标题</th>
                        <th>
                            发布时间
                            <button @click="toggleSortOrder">
                                <img v-if="sortOrder === 'asc'" src="../images/公告列表/u202.png" alt="升序"
                                    class="button-img" />
                                <img v-else src="../images/公告列表/u202.png" alt="降序" class="button-img" />
                            </button>
                        </th>
                        <th>处理状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in sortedItems" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.title }}</td>
                        <td>{{ item.date }}</td>
                        <td><span :data-status="item.status">{{ item.status }}</span></td>
                        <td>
                            <button @click="viewDetails(index)" class="check">查看</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div v-if="showComplainDialog" class="complain-dialog">
            <div class="complain-content">
                <button class="close-btn" @click="cancelComplaint">X</button>
                <h3>创建投诉</h3>
                <form @submit.prevent="submitComplaint">
                    <label>投诉标题<sup>*</sup></label>
                    <input type="text" v-model="complaint.title" placeholder="请输入投诉标题" required />
                    <label>投诉内容<sup>*</sup></label>
                    <textarea v-model="complaint.content" placeholder="请输入投诉内容" required></textarea>
                    <label>联系人<sup>*</sup></label>
                    <input type="text" v-model="complaint.contactPerson" placeholder="请输入联系人姓名" required />
                    <label>联系电话<sup>*</sup></label>
                    <input type="text" v-model="complaint.contactNumber" placeholder="请输入联系电话" required />
                    <div class="buttons">
                        <button type="button" @click="cancelComplaint">取消</button>
                        <button type="submit">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Weigui',
    data() {
        return {
            sortOrder: 'asc', // 初始排序状态设为升序
            showComplainDialog: false,
            complaint: {
                title: '',
                content: '',
                contactPerson: '',
                contactNumber: ''
            },
            items: [
                { title: "【麻城市中心】麻城经济开发区谌家园小学建设项目招标预公告", date: "2022-04-13", status: "正在处理中" },
                { title: '【麻城市中心】麻城市农村公路管理局招标计划', date: '2022-04-14', status: "正在处理中" },
                { title: '【麻城市中心】麻城经济开发区谌家园小学及附属幼儿园建设项目招标预公告', date: '2022-04-14', status: "正在处理中" },
                { title: '【汉川市中心】汉川电厂四期扩建工程电力和水管网线路迁改建设工程', date: '2022-04-15', status: "正在处理中" },
                { title: '【红安县中心】红安县2023年度小型水库安全监测项目设计采购施工总承包(EPC)', date: '2022-04-14', status: "正在处理中" },
                { title: '海头镇宅基村土地发包项目', date: '2022-04-14', status: "正在处理中" },
                { title: '先锋创业大楼(515-1室)60㎡', date: '2022-04-14', status: "正在处理中" },
                { title: '万达开绿色智能铸造产业园项目(二期)比选结果公告', date: '2022-04-17', status: "处理完成" },
                { title: '2023年度工伤基金结算支付智能审核监控项目竞争性磋商公告', date: '2022-04-13', status: "处理完成" },
                { title: '万达开绿色智能铸造产业园项目(三期)比选结果公告', date: '2022-04-13', status: "处理完成" },
                { title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目', date: '2022-04-12', status: "处理完成" },
                { title: '侯马市第二中学校2023年4月至11月政府采购意向-城乡义务教育补助经费中央资金', date: '2022-04-18', status: "处理完成" },
                { title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目', date: '2022-04-14', status: "处理完成" },
                { title: '侯马市第二中学校2023年4月至8月政府采购意向-城乡义务教育补助经费中央资金', date: '2022-04-10', status: "处理完成" },
                { title: '【次氯酸钠贮存罐修理】采购公告 附件', date: '2022-04-16', status: "处理完成" },
            ]
        }
    },
    computed: {
        sortedItems() {
            // 使用this.sortOrder来决定排序方式
            return this.items.slice().sort((a, b) => {
                if (this.sortOrder === 'asc') {
                    return new Date(a.date) - new Date(b.date); // 升序
                } else {
                    return new Date(b.date) - new Date(a.date); // 降序
                }
            });
        }
    },
    methods: {
        toggleSortOrder() {
            // 切换排序顺序
            this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
        },
        handleView(item) {
            console.log("查看", item);
            // 实现查看逻辑
        },
        submitComplaint() {
            if (this.complaint.title && this.complaint.content && this.complaint.contactPerson && this.complaint.contactNumber) {
                this.items.push({
                    title: this.complaint.title,
                    date: new Date().toISOString().split('T')[0],
                    status: '正在处理中'
                });
                alert('提交成功');
                this.showComplainDialog = false;
                this.complaint = { title: '', content: '', contactPerson: '', contactNumber: '' };
            } else {
                alert('请填写所有必填项');
            }
        },
        cancelComplaint() {
            this.showComplainDialog = false;
            this.complaint = { title: '', content: '', contactPerson: '', contactNumber: '' };
        },
        viewDetails(index) {
            this.$router.push({ name: 'checkxq', params: { id: index } });
        }
    }
}
</script>

<style scoped>
.breadcrumb {
    margin-left: 20px;
    margin-bottom: -40px;
    font-size: 14px;
    text-align: left;
    margin-top: 30px;
    display: flex;
}

.breadcrumb .weigui {
    color: black;
    margin-top: 30px;
    text-decoration: none;
}

.breadcrumb .shouye {
    color: #888;
    margin-top: 30px;
    text-decoration: none;
}

.breadcrumb .go-to-complain {
    width: 130px;
    background-color: #4bebab;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 30px;
    margin-left: 1400px;
}

.table-container {
    background-color: white;
    margin: 20px;
    padding: 20px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    margin-bottom: 300px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #b4f4da;
    position: relative;
}

th button {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

th img {
    width: 12px;
    height: 12px;
    margin-left: 4px;
}

th.left-align {
    text-align: left;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

td span[data-status="正在处理中"] {
    color: orange;
}

td span[data-status="处理完成"] {
    color: green;
}

.check {
    border: none;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
    color: #4bebab;
    font-family: inherit;
    font-size: inherit;
}

.complain-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.complain-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.complain-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.complain-content label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    text-align: left;
}

.complain-content input,
.complain-content textarea {
    width: calc(100% - 10px);
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.complain-content textarea {
    resize: none;
    height: 100px;
}

.complain-content .buttons {
    display: flex;
    justify-content: flex-end;
}

.complain-content .buttons button {
    background-color: #4bebab;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.complain-content .buttons button:first-child {
    background-color: #ccc;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

.complain-content sup {
    color: red;
}
</style>
